<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-04-05 15:57:02
 * @LastEditors: yyh
 * @LastEditTime: 2022-04-23 01:00:03
-->
<!-- 登录页面 -->
<template>
  <div class="login-container">
    <div class="header">
      <div class="title">校园资产综合管理系统</div>
    </div>
    <!-- 中间 -->
    <div class="center">
      <!-- 表单 -->
      <div class="form">
        <el-form
          :model="loginForm"
          ref="loginForm"
          :rules="loginRules"
          class="login-form"
          autocomplete="on"
          label-position="left"
        >
          <div
            style="
              text-align: center;
              height: 60px;
              line-height: 60px;
              font-weight: bold;
            "
          >
            用户名密码登录
          </div>
          <el-form-item prop="name">
            <el-input
              v-model="loginForm.name"
              placeholder="用户名"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              show-password
              v-model="loginForm.password"
              placeholder="密码"
            />
          </el-form-item>
          <div>
            <el-button @click="Login" type="primary" style="margin-left: 165px"
              >登&nbsp;录</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["loginUserId"]),
  },
  data() {
    return {
      loginForm: {
        name: "",
        password: "",
      },
      loginRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    Login() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$http.post("users/login", this.loginForm);
          if (res.data.code === 400) {
            this.$notify({
              title: "提示",
              message: res.data.msg,
              type: "warning",
            });
          } else if (res.data.code === 200) {
            //保存登陆成功后的用户id到sessionStorage中
            window.sessionStorage.setItem("id", res.data.data.id);
            window.sessionStorage.setItem("role", res.data.data.role);
            window.sessionStorage.setItem("img", res.data.data.img);
            this.$router.replace({
              path: "/Home",
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.login-container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: #f4f4f4;
  overflow: hidden;
}
.header {
  width: 100%;
  height: 50vh;
  background-color: #409eff;
  position: relative;
  color: #ffffff;
}
.title {
  text-align: center;
  position: absolute;
  bottom: 200px;
  width: 100%;
  font-size: 2em;
}
.center {
  box-sizing: border-box;
  position: relative;
  top: -150px;
  background-color: #ffffff;
  width: 500px;
  margin: 0 auto;
  border-radius: 5px;
  padding: 2em;
  box-shadow: 0 0 10px #ccc;
}
</style>
